import React,{Component} from 'react';
import {connect} from 'react-redux';
import {getPics} from './../action/about';

class Counter extends Component{
    componentWillMount(){
        // this.props.getPics();    //base64图片过大，性能极差，暂不使用，改用网络图片地址
    }
    render(){
        const {getPics} =this.props;
        // if(!pics){
        //     return false;
        // }
        var pics=[
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516796282880&di=4d01e42219efea5068daa3d328261e78&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F32%2Fd%2F1.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516796282860&di=9eeb841dc2a498f4619c6f7522161d0c&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Fa1%2F13%2Fd%2F28.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516796282809&di=5796b46f5237ef4832c6250552cb51a1&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140610%2F240371-14061009444435.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516796282793&di=2754734ee9942b2c88366d13d4d89e8c&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Fa1%2F13%2Fd%2F32.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516796282774&di=9f453c06d8f582f593cfd190563a73da&imgtype=0&src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0701%2Ffa9840393a419ae7647d8d2ba411489d.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516974378918&di=17f037c51183fb65aecb6fc47ac0834e&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2FBizhi%2Fbt1_1366.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516974378995&di=69e58aa3536ce452cd7bda2f748197af&imgtype=0&src=http%3A%2F%2Fi1.17173cdn.com%2F9ih5jd%2FYWxqaGBf%2Fforum%2Fimages%2F2014%2F07%2F18%2F234059wqmplryamj8tlyda.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516974378962&di=38a33554126cb4b87e36860e4d970534&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1487637263776%2F1487637263776.jpg',
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516974507431&di=8726fbb38c70742b8abcd6dd5b2a6d45&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F772141.jpg'
        ]
   
        var swipers=[];
        for(let i=0;i<pics.length;i++){
            swipers.push(
                <div className="swiper-slide"  key={i}>
                    <img src={pics[i]} style={{width:'1000px',height:'600px'}}/>
                </div>
            )
        }

        return (
            <div>
                <h2 style={{textAlign:'center'}}>风&nbsp;景&nbsp;图&nbsp;片&nbsp;赏&nbsp;析</h2>
                <div className="swiper-container" style={{zIndex:'0'}}>
                    <div className="swiper-wrapper">
                        {swipers}
                    </div>
                    {/* 如果需要分页器*/}
                    <div className="swiper-pagination"></div>
                    
                    {/* 如果需要导航按钮 */}
                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                    
                    {/* 如果需要滚动条 */}
                    <div className="swiper-scrollbar"></div>
                </div>
            </div>
        )
    }
    componentDidMount(){
        console.log('did')
        new Swiper('.swiper-container', {
            autoplay : {
                delay:3000
            },
            speed:500,
            direction: 'horizontal',
            loop: true,
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
            el: '.swiper-scrollbar',
            },
        })    
    }

}

const getValue = (state)=>{
    return{
        pics:state.about.pics.rows
    }
}

const About = connect(getValue,{getPics})(Counter);

module.exports=About;